<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>原生JS实现购物车结算功能代码</title>
    <link rel="stylesheet" href="../css/style.css" />
</head>

<body>
    <div class="catbox">
        <table id="cartTable">
            <thead>
                <tr>
                    <th><label>
                            <input class="check-all check" type="checkbox" />&nbsp;&nbsp;全选</label></th>
                    <th>商品</th>
                    <th>单价</th>
                    <th>数量</th>
                    <th>小计</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <!-- <tr>
                    <td class="checkbox"><input class="check-one check" type="checkbox" /></td>
                    <td class="goods"><img src="../images/1.jpg" alt="" /><span>Casio/卡西欧 EX-TR350</span></td>
                    <td class="price">5999.88</td>
                    <td class="count"><span class="reduce"></span>
                        <input class="count-input" type="text" value="1" />
                        <span class="add">+</span>
                    </td>
                    <td class="subtotal">5999.88</td>
                    <td class="operation"><span class="delete">删除</span></td>
                </tr>
                <tr>
                    <td class="checkbox"><input class="check-one check" type="checkbox" /></td>
                    <td class="goods"><img src="../images/2.jpg" alt="" /><span>Canon/佳能 PowerShot SX50 HS</span></td>
                    <td class="price">3888.50</td>
                    <td class="count"><span class="reduce"></span>
                        <input class="count-input" type="text" value="1" />
                        <span class="add">+</span>
                    </td>
                    <td class="subtotal">3888.50</td>
                    <td class="operation"><span class="delete">删除</span></td>
                </tr>
                <tr>
                    <td class="checkbox"><input class="check-one check" type="checkbox" /></td>
                    <td class="goods"><img src="../images/3.jpg" alt="" /><span>Sony/索尼 DSC-WX300</span></td>
                    <td class="price">1428.50</td>
                    <td class="count"><span class="reduce"></span>
                        <input class="count-input" type="text" value="1" />
                        <span class="add">+</span>
                    </td>
                    <td class="subtotal">1428.50</td>
                    <td class="operation"><span class="delete">删除</span></td>
                </tr>
                <tr>
                    <td class="checkbox"><input class="check-one check" type="checkbox" /></td>
                    <td class="goods"><img src="../images/4.jpg" alt="" /><span>Fujifilm/富士 instax mini 25</span></td>
                    <td class="price">640.60</td>
                    <td class="count"><span class="reduce"></span>
                        <input class="count-input" type="text" value="1" />
                        <span class="add">+</span>
                    </td>
                    <td class="subtotal">640.60</td>
                    <td class="operation"><span class="delete">删除</span></td>
                </tr> -->
            </tbody>
        </table>
        <div class="foot" id="foot">

            <a class="fl" id="deleteAll" href="javascript:;">删除</a>
            <div class="fr closing" onclick="getTotal();">结 算</div>
            <input type="hidden" id="cartTotalPrice" />
            <div class="fr total">合计：￥<span id="priceTotal">0.00</span></div>
            <div class="fr selected" id="selected">已选商品<span id="selectedTotal">0</span>件<span
                    class="arrow up">︽</span><span class="arrow down">︾</span></div>
            <div class="selected-view">
                <div id="selectedViewList" class="clearfix">
                    <div><img src="../images/1.jpg"><span>取消选择</span></div>
                </div>
                <span class="arrow">◆<span>◆</span></span>
            </div>
        </div>
    </div>

</body>
<script>
    console.log("同步开始");

    var tbody = document.querySelector("#cartTable tbody");

    var xhr = new XMLHttpRequest(); // 0 

    xhr.open("get", "../data/shoppingCar.json", true);  // 1

    xhr.send();

    xhr.onreadystatechange = function () {
        // 2 3 4
        console.log("请求状态改变", xhr.readyState);

        if (xhr.readyState == 4 && xhr.status == 200) {
            var result = xhr.responseText;
            // console.log(result);
            var data = JSON.parse(result);
            console.log(data);

            var { list } = data;

            var html = "";

            list.forEach((item) => {
                var { title, desc, img, cprice, buyNum } = item;
                html += `<tr>
                    <td class="checkbox"><input class="check-one check" type="checkbox" /></td>
                    <td class="goods">
                        <img src="${img}" alt="" />
                        <span>${title}</span>
                    </td>
                    <td class="price">${Number(cprice).toFixed(2)}</td>
                    <td class="count">
                        <span class="reduce">${buyNum > 1 ? "-" : ""}</span>
                        <input class="count-input" type="text" value="${buyNum}" />
                        <span class="add">+</span>
                    </td>
                    <td class="subtotal">${(cprice * buyNum).toFixed(2)}</td>
                    <td class="operation"><span class="delete">删除</span></td>
                </tr>`
            })

            tbody.innerHTML = html; // 将html结构放入页面中 => 动态生成 


            // 全选
            // 点击全选  所有单选跟随全选的选中状态

            // 反选
            // 每次点击单选  => 判断所有的单选是否全部被选中
            //   全部被选中 => 全选选中
            //   存在未选中 => 没有全选(全选不选中)

            var checkAll = document.getElementsByClassName("check-all")[0];
            var checkOneList = document.getElementsByClassName("check-one");
            var addList = document.getElementsByClassName("add");
            var reduceList = document.getElementsByClassName("reduce");
            var deleteList = document.getElementsByClassName("delete");
            var deleteAll = document.getElementById("deleteAll");
            var selectedTotal = document.getElementById("selectedTotal");
            var priceTotal = document.getElementById("priceTotal");

            // 全选功能  => 点击全选  所有单选跟随全选的选中状态
            checkAll.onclick = function () {
                var status = this.checked;
                console.log(status);

                // 所有单选跟随全选的选中状态
                for (var i = 0; i < checkOneList.length; i++) {
                    var checkOne = checkOneList[i];
                    checkOne.checked = status;
                }
                getTotal();
            }


            // 每次点击单选  => 判断所有的单选是否全部被选中

            // 页面加载时 => 循环绑定事件
            for (let i = 0; i < checkOneList.length; i++) {
                let checkOne = checkOneList[i];
                checkOne.onclick = function () {
                    console.log(this);

                    // 每次点击单选时 => 判断商品是否全部被选中
                    isAllChecked();
                    getTotal();

                    // 结算流程  找到所有选中状态的checkOne => 找到对应的数量和小计 => 累加
                    /* var sum = 0;
                    var allPrice = 0;
                    for(var j = 0;j<checkOneList.length;j++){
                        var item = checkOneList[j];
                        if(item.checked){
                            var parentTr = parent(parent(item));
                            var countInput = parentTr.getElementsByClassName("count-input")[0];
                            var subtotalTd = parentTr.getElementsByClassName("subtotal")[0];
                            var num = countInput.value * 1;
                            var subtotal = subtotalTd.textContent * 1;
                            console.log(countInput,num);
        
                            sum += num;
                            allPrice += subtotal;
        
                        }
                    }
                    // console.log(sum,allPrice);
        
                    selectedTotal.textContent = sum;
                    priceTotal.textContent = allPrice.toFixed(2); */

                }
            }


            // 购物车加减
            // 点击 “+”     输入框  数量 加一 
            //             小计更新  =  单价*数量
            //             减号按钮的 “-”  出现
            for (let i = 0; i < addList.length; i++) {
                let add = addList[i];
                add.onclick = function () {
                    console.log(this);

                    // a. 输入框  数量 加一 
                    var countInput = this.previousElementSibling;
                    console.log(countInput);
                    var num = countInput.value;  // num = "1"   => 把 countInput.value 取出来 赋值给变量num
                    num++;
                    console.log(num);
                    countInput.value = num;  // 把num赋值到countInput 

                    // b. 小计更新  =  单价*数量
                    // 单价  =>  找  加号的父元素的前一个
                    // 数量  =>  num

                    var priceTd = this.parentElement.previousElementSibling;
                    var subtotalTd = this.parentElement.nextElementSibling;

                    console.log(priceTd);
                    var price = priceTd.textContent;
                    // 价格可能出现的情况
                    // "2999.00元"   => "2999"
                    // "¥2999.00"    => "2999"

                    var subtotal = price * num;
                    subtotalTd.textContent = subtotal.toFixed(2);


                    var reduce = countInput.previousElementSibling;
                    reduce.textContent = "-";

                    getTotal();

                }
            }

            /* 点击减号    输入框  数量 减一   （细节要求  数量为1的时候  不再减）
                       小计更新  =  单价*数量 
                       减之前  判断  如果数量为1  不能减     return false
                       减之后  判断  如果数量为1  减号按钮的 “-” 消失 */

            for (let i = 0; i < reduceList.length; i++) {
                let reduce = reduceList[i];
                reduce.onclick = function () {
                    console.log(this);

                    //a. 输入框  数量 减一
                    var countInput = next(this);
                    var num = countInput.value;
                    // c. 减之前  判断 如果数量已经为1  不能减     return false
                    if (num <= 1) {
                        alert("亲,不能再少了!")
                        return false; // 如果数量已经是1 => 不再执行后续操作
                    }

                    num--;  //自减

                    // 减之后  判断  如果数量为1  减号按钮的 “-” 消失   (2切1的瞬间)
                    if (num <= 1) this.textContent = "";

                    countInput.value = num;

                    // b.  小计更新  =  单价*数量 
                    var priceTd = prev(parent(this));
                    var subtotalTd = next(parent(this));
                    var price = priceTd.textContent;

                    var subtotal = price * num;
                    subtotalTd.textContent = subtotal.toFixed(2);

                    getTotal();

                }
            }



            // 两个细节
            // 1.  单删     每次删除商品之后 => 剩余的商品可能全部被选中
            //     每次删除商品之后  判断  如果剩余的商品全部被选中 => 全选框 变为选中状态

            // 2.  全删 (bug  全删之后  全选框依旧被选中  !!!!)
            //     原因 (判断是否全选  封装时用的是假设法  如果checkOneList为0  flag依旧为true)
            //     解决方法  加一个长度判断   如果checkOneList为0(没有商品)  全选框取消全选


            // 单删
            for (let i = 0; i < deleteList.length; i++) {
                let del = deleteList[i];
                del.onclick = function () {
                    console.log(this);
                    if (confirm("是否删除当前商品?")) {
                        // var parentTr = this.parentElement.parentElement;
                        var parentTr = parent(parent(this));
                        parentTr.remove();

                        // 1. 每次删除之后 判断剩余的商品是否全部被选中  
                        isAllChecked();
                        getTotal();

                    }
                }
            }

            // 多删   判断单选框是否被选中(checked)     选中就删除 该行  

            // 问题
            // 全删除之后 => 发现存在漏删的数据  => 类似数组坍塌

            // 原因:  document.getElementsByClassName() 方法获取的集合,会随页面同类名元素的增加和减少自动更新集合  => 理解:元素增删改 => 页面回流 =>   document.getElementsByClassName() 方法获取的集合 => 同步更新

            // 解决方法  删除之后下次还从当前位置删

            deleteAll.onclick = function () {
                for (var i = 0; i < checkOneList.length; i++) {
                    var checkOne = checkOneList[i];
                    if (checkOne.checked) {
                        var parentTr = parent(parent(checkOne));
                        parentTr.remove();
                        i--;
                    }
                }

                // 全删之后 => 判断商品(剩余的?)是否全部被选中  => 肯定取消反选
                isAllChecked();
                getTotal();
            }

            // 判断商品是否反选 (可以是删除之后剩余的) 
            function isAllChecked() {
                // 全删之后判断是否 取消反选
                var flag = true; //假设全部被选中

                // 点击单选时 => 判断所有的单选是否全部被选中
                for (var j = 0; j < checkOneList.length; j++) {
                    var item = checkOneList[j];

                    // !item.checked === true  =>   item.checked === false
                    if (!item.checked) { // 如果存在未选中的 => false
                        flag = false;
                        break;
                    }
                }

                // 2. 如果全部删除 => 商品数量为0  => checkOneList.length === 0 => false
                checkAll.checked = checkOneList.length > 0 ? flag : false;
            }

            function getTotal() {
                var sum = 0;
                var allPrice = 0;
                for (var j = 0; j < checkOneList.length; j++) {
                    var item = checkOneList[j];
                    if (item.checked) {
                        var parentTr = parent(parent(item));
                        var countInput = parentTr.getElementsByClassName("count-input")[0];
                        var subtotalTd = parentTr.getElementsByClassName("subtotal")[0];
                        var num = countInput.value * 1;
                        var subtotal = subtotalTd.textContent * 1;
                        console.log(countInput, num);

                        sum += num;
                        allPrice += subtotal;

                    }
                }
                // console.log(sum,allPrice);

                selectedTotal.textContent = sum;
                priceTotal.textContent = allPrice.toFixed(2);
            }

            function parent(ele) {
                return ele.parentElement;
            }

            function prev(ele) {
                return ele.previousElementSibling;
            }

            function next(ele) {
                return ele.nextElementSibling;
            }


        }


    }


    // 问题:
    // ajax请求是异步的 => 等所有的同步任务执行完毕 (此时无法获取未生成的元素 绑定事件) => 异步任务才会进入主线程执行(发送请求和获取响应数据) => 触发onreadystatechange  => 动态生成

    // 无法在同步任务中直接给未来生成的元素绑定事件

    // 解决方法:
    // 1. 老赖行为  => 等元素动态生成之后 再获取元素和绑定事件
    // 2. 事件委托  => 利用事件冒泡的元素 将子代元素的事件 委托给父代元素代为执行   


    var checkAll = document.getElementsByClassName("check-all")[0];
    var checkOneList = document.getElementsByClassName("check-one");
    var addList = document.getElementsByClassName("add");
    var reduceList = document.getElementsByClassName("reduce");
    var deleteList = document.getElementsByClassName("delete");
    var deleteAll = document.getElementById("deleteAll");
    var selectedTotal = document.getElementById("selectedTotal");
    var priceTotal = document.getElementById("priceTotal");

    console.log(checkOneList);
    console.log(addList);
    console.log(reduceList);
    console.log(deleteList);

    console.log("同步结束");





</script>

</html>